<include file="Public/head" title='快件信息录入'/>  
<body style="background-color: #f3f3f3;">
<div class="nav">
	<a href="<{:U('index/search')}>">查询快递</a>
	<a href="javascript:;" class="active">录入信息</a>
</div>
<div class="form">
	<label class="icon-right">
		货柜编号
		<select style="opacity: 1;position:relative;float:right;width:auto;background: transparent;border:none;">
			<foreach name="container" item="vo">
				 <option <{:session('container_id') == $vo['id'] ? 'selected' : ''}> value="<{$vo['id']}>"><{$vo['no']}></option>
			</foreach>
		</select>
	</label>
	<label class="icon-right">
		<span class="l">快递编号&nbsp;&nbsp;&nbsp;</span>
		<input class="r" id="no" type="text" placeholder="请输入快递编号" />
		<button class="saomiao2 iconfont icon-saomiao" ></button>		
	</label>
	<label class="icon-right">
		<span class="l">收件人手机</span>
		<input class="r" id="phone" type="tel" placeholder="请输入手机号" />
		<button class="yuyin2 iconfont icon-huatong" id="luyin"  ></button>
	</label>
	<label class="icon-right">
		收件人姓名
		<input class="r" id="name" type="text" placeholder="请输入姓名" />
	</label>
	<label class="icon-right">
		收件人地址
		<div class="r chose">
			<input id="addr" type="text" readonly="" placeholder="选择地址">
    		<input id="value1" type="hidden" value="20,234,504">
    	</div>
	</label>
	<textarea id="detail" placeholder="请输入详细地址"></textarea>
</div>

<div class="wangyao_layer" style="display:none" id="shibie">
	<div class="wangyao_content" >
		<span>录音中...</span>
		<button class="formList2" onclick="stop()" >完成</button>
	</div>
</div>

<div id="huatong" style="display:none;position:fixed;z-index:99999;bottom:0px;left:0px;background:rgba(0,0,0,0.5);width:100%;text-align:center;height:5rem">
<img src="__PUBLIC__/phone/images/huatong.gif" style="height:5rem;width:100%" />
</div>

<button class="saveBtn" onclick="save()">保存</button>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/position/position.css"></link>
<script type="text/javascript" src="__PUBLIC__/position/position.js"></script>
<script type="text/javascript" src="__PUBLIC__/position/positiondata.js"></script>
<script type="text/javascript" src="__PUBLIC__/position/positiondata2.js"></script>
<script type="text/javascript">
	var area1 = new LArea();
        area1.init({
            'trigger': '#addr', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
            'valueTo': '#value1', //选择完毕后id属性输出到该位置
            'keys': {
                id: 'id',
                name: 'name'
            }, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
            'type': 1, //数据源类型
            'data': LAreaData //数据源
        });
        area1.value=[0,0,0];//控制初始位置，注意：该方法并不会影响到input的value
</script>
<script>
	wx.config({
		debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
		appId: '<{$signPackage["appId"]}>', // 必填，公众号的唯一标识
		timestamp:<{$signPackage["timestamp"]}>, // 必填，生成签名的时间戳
		nonceStr: '<{$signPackage["nonceStr"]}>', // 必填，生成签名的随机串
		signature: '<{$signPackage["signature"]}>',// 必填，签名，见附录1
		jsApiList: ['scanQRCode','startRecord','stopRecord','onVoiceRecordEnd','translateVoice'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
	});
	$(".saomiao2").click(function(){
		wx.scanQRCode({
		needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
		scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
		success: function (res) {
			var result = res.resultStr.split(','); // 当needResult 为 1 时，扫码返回的结果
			$("#no").val(result[1]);
			}
		});
	});
	var data={};
	function save(){
		if($('select').val()=="请选择"){
			layer.msg("请选择货柜编号",{time:1500});
			return false;
		}
		if($('#no').val()==""){
			layer.msg("请输入快递编号",{time:1500});
			return false;
		}
		if($('#phone').val()==""||!(/^1[34578]\d{9}$/.test($('#phone').val()))){
			layer.msg("请输入正确的手机号",{time:1500});
			return false;
		}
		if($('#name').val()==""){
			layer.msg("请输入收件人姓名",{time:1500});
			return false;
		}
		// if($('#addr').val()==""){
		// 	layer.msg("请选择地址",{time:1500});
		// 	return false;
		// }
		// if($('#detail').val()==""){
		// 	layer.msg("请输入详细地址",{time:1500});
		// 	return false;
		// }
		data['container_id']=$('select').val();
		data['no']=$('#no').val();
		data['phone']=$('#phone').val();
		data['name']=$('#name').val();
		data['addr']=$('#addr').val()+$('#detail').val();
		$.ajax({
            type:'post',
            url:'<{:U("Form/save")}>',
            async:false,
            data:data,
            success:function(res){
                layer.msg(res.info,{time:1500});
                if(res.status==1){
                    setTimeout(function(){
                    	history.go(0);
                    },1500)
                }
            }
        }); 
	};
	
	function luyin(){
	$("#shibie").show();	
	wx.startRecord();	
	}
	
	function stop(){
	$("#shibie").hide();
	wx.stopRecord({
    success: function (res) {
        var localId = res.localId;
		wx.translateVoice({
		localId: localId, // 需要识别的音频的本地Id，由录音相关接口获得
		isShowProgressTips: 1, // 默认为1，显示进度提示
		success: function (res) {
		var result = res.translateResult;
		if(result){
		$("#phone").val(result.substring(0,result.length-1));

		}else{
		$("#phone").val('未识别到语音输入');
		}	
    }
});
    }
});
	}
	
	document.getElementById('luyin').addEventListener("touchstart",function(event){
		event.preventDefault();
		$("#huatong").show();
		wx.startRecord();		
	});
	
	document.getElementById('luyin').addEventListener("touchend",function(event){
		 event.preventDefault();
		 $("#huatong").hide();
		 	wx.stopRecord({
    success: function (res) {
        var localId = res.localId;
		wx.translateVoice({
		localId: localId, // 需要识别的音频的本地Id，由录音相关接口获得
		isShowProgressTips: 1, // 默认为1，显示进度提示
		success: function (res) {
		var result = res.translateResult;
		if(result){
		$("#phone").val(result.substring(0,result.length-1));
		    var reg = /^1[34578]\d{9}$/;
            var phone = result.substring(0,result.length-1)
            if(reg.test(phone)){
                $.post(
                        "<{:U('Home/Customer/getName')}>",
                        {
                            phone:phone
                        },function(res){
                           if(res.status == 1){
                               $("#name").val(res.info);
                           }
                        }
                );
            }	
		}else{
		$("#phone").val('未识别到语音输入');
		}	
    }
});
    }
});
	});
	
	
	$("#phone").bind("input propertychange",function(){
            var reg = /^1[34578]\d{9}$/;
            var phone = $(this).val();
            if(reg.test($(this).val())){
                $.post(
                        "<{:U('Home/Customer/getName')}>",
                        {
                            phone:phone
                        },function(res){
                           if(res.status == 1){
                               $("#name").val(res.info);
                           }
                        }
                );
            }
    })
    // $("#phone").blur(function(){
    // 	 var reg = /^1[34578]\d{9}$/;
    //         var phone = $(this).val();
    //         if(reg.test($(this).val())){
    //             $.post(
    //                     "<{:U('Home/Customer/getName')}>",
    //                     {
    //                         phone:phone
    //                     },function(res){
    //                        if(res.status == 1){
    //                            $("#name").val(res.info);
    //                        }
    //                     }
    //             );
    //         }
    // });
</script>
</body>
</html>